<template>
	<view class="operationBar">
		<!-- 取消键盘上推页面 -->
		<input type="text" v-model="txt" placeholder="请输入内容" @confirm="send" />
		<view class="iconfont icon-fabu" @tap="send" hover-class="animation_jello_5 fontMainColor"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				txt: ""
			};
		},
		methods: {
			send() {
				if (this.txt.trim() === "") {
					uni.showToast({
						title: "消息不能为空",
						icon: "none"
					});
					return;
				};
				this.$emit("send", this.txt);
				this.txt = "";
			}
		},
	}
</script>

<style lang="scss">
	// 底部操作条
	.operationBar {
		background-color: #FFFFFF;
		height: 110rpx;
		// 固定在底部
		@include fixedBottom;
		@include flexCenterCenter;
		border-top: 1rpx solid #D7D7D7;

		>input {
			flex: 1;
			background-color: #FAF9FE;
			margin: 0 20rpx;
			font-size: 1.1rem;
			padding: 6rpx 14rpx;
			border-radius: 10rpx;
		}

		>view {
			width: 110rpx;
			height: 100%;
			@include flexCenterCenter;
			font-size: 1.2rem;
		}
	}

	// 点击发送时
	.fontMainColor {
		color: #FF4A6A;
	}
</style>
